<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Tablecloth</title>

<!-- paste this code into your webpage -->
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<!-- end -->

<style>

body{
	margin:0;
	padding:0;
	background:#f1f1f1;
	font:70% Arial, Helvetica, sans-serif; 
	color:#555;
	line-height:150%;
	text-align:left;
}
a{
	text-decoration:none;
	color:#057fac;
}
a:hover{
	text-decoration:none;
	color:#999;
}
h1{
	font-size:140%;
	margin:0 20px;
	line-height:80px;	
}
h2{
	font-size:120%;
}
#container{
	margin:0 auto;
	width:680px;
	background:#fff;
	padding-bottom:20px;
}
#content{margin:0 20px;}
p.sig{	
	margin:0 auto;
	width:680px;
	padding:1em 0;
}
form{
	margin:1em 0;
	padding:.2em 20px;
	background:#eee;
}
</style>

</head>

<body>

<div id="container">
	<h1>Tablecloth: Example</h1>
	
	<div id="content">


	<!-- all you need with Tablecloth is a regular, well formed table. No need for id's, class names... --> 
	
		<h2>Table with top headings</h2>
	
		<table cellspacing="0" cellpadding="0">
			<tr>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>																				
		</table>
		
		<table cellspacing="0" cellpadding="0">
			<tr>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>								
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>								
			</tr>																													
		</table>		
	
		<h2>Table with side headings</h2>
	
		<table cellspacing="0" cellpadding="0">
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>																																					
		</table>
		
		<h2>Table with top and side headings</h2>
	
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>&nbsp;</td>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
			</tr>
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<th>Title</th>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>																																					
		</table>		
		
		
	</div>
</div>
<p class="sig">Tablecloth is brought to you by <a href="http://www.cssglobe.com">Css Globe</a></p>
	
	
</body>
</html>
